import React, { useEffect, useRef, useState } from 'react';
import { Form, Input, Modal, Select, Row, Col, DatePicker } from 'antd';
// @ts-ignore
import CheckInput from '../../utils/checkInput/CheckInput';
import { addAdminRuleTypeArray, adminRuleTypeArray } from '@/utils/constant';
import { hehLocalStorage } from '@/utils/utils';

const FormItem = Form.Item;
const Detail = (props: any) => {
  const {
    visible,
    onCancel,
    onOk,
    getForm,
    loading,
    afterClose,
    editId,
  } = props;
  const [confirmDirty, setConfirmDirty]: any = useState('');
  const [form] = Form.useForm();
  const [setShowPublicUsers] = React.useState(false);
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
      md: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 18 },
      md: { span: 18 },
    },
  };

  useEffect(() => {
    getForm(form);
  }, []);

  const compareToFirstPassword = (rule: any, value: any, callback: any) => {
    if (value && value !== form.getFieldValue('password')) {
      callback('两次密码不一致，请重新填写密码!');
    } else {
      callback();
    }
  };

  const validateToNextPassword = (rule: any, value: any, callback: any) => {
    if (value && value.length < 6) {
      return callback('密码的长度只能在6~18个字符之间！');
    }
    if (value && !CheckInput.checkPsw(value)) {
      return callback('密码格式有误，请重新输入！');
    }
    if (value && confirmDirty) {
      form.validateFields(['confirm']);
    }
    callback();
  };

  const user = hehLocalStorage.getItem('loginUserInfo');

  return (
    <Modal
      width={1024}
      afterClose={afterClose}
      destroyOnClose={true}
      confirmLoading={loading}
      title={editId !== undefined ? '编辑' : '新增'}
      visible={visible}
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form hideRequiredMark style={{ marginTop: 8 }} form={form} name="basic">
        <Row gutter={12}>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入账号' }]}
              {...formItemLayout}
              label={'账号'}
              name="loginCode"
            >
              <Input disabled={editId !== undefined} />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请输入昵称' }]}
              {...formItemLayout}
              label={'昵称'}
              name="userName"
            >
              <Input />
            </FormItem>
          </Col>
          {editId === undefined && (
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                label={'密码'}
                name="password"
                rules={[
                  { required: true, message: '密码不能为空!' },
                  {
                    validator: validateToNextPassword,
                  },
                ]}
              >
                <Input type={'password'} />
              </FormItem>
            </Col>
          )}
          {editId === undefined && (
            <Col span={12}>
              <FormItem
                {...formItemLayout}
                label={'确认密码'}
                name="confirm"
                rules={[
                  { required: true, message: '确认密码不能为空!' },
                  {
                    validator: compareToFirstPassword,
                  },
                ]}
              >
                <Input type={'password'} />
              </FormItem>
            </Col>
          )}
          <Col span={12}>
            <FormItem
              rules={[
                { required: true, message: '请输入手机号' },
                {
                  pattern: /^[0-9\(\)\-\+]{11,}$/,
                  message: '请输入正确的手机号',
                },
              ]}
              {...formItemLayout}
              label={'手机号'}
              name="telephone"
            >
              <Input />
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择角色' }]}
              {...formItemLayout}
              label={'角色'}
              name="userType"
            >
              <Select
                disabled={!(user?.userType === 1 || user?.userType === 2)}
              >
                {editId !== undefined
                  ? adminRuleTypeArray.map(item => (
                      <Select.Option
                        disabled={item.value === 1}
                        key={item.value}
                        value={item.value}
                      >
                        {item.label}
                      </Select.Option>
                    ))
                  : addAdminRuleTypeArray.map(item => (
                      <Select.Option key={item.value} value={item.value}>
                        {item.label}
                      </Select.Option>
                    ))}
              </Select>
            </FormItem>
          </Col>
          <Col span={12}>
            <FormItem
              rules={[{ required: true, message: '请选择状态' }]}
              {...formItemLayout}
              label={'状态'}
              name="locked"
            >
              <Select>
                <Select.Option value={1}>正常</Select.Option>
                <Select.Option value={2}>锁定</Select.Option>
              </Select>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Detail;
